<!-- Horizontal Form -->
 <div class="box box-info" id="roleEdit" >
      <div class="box-header with-border">
        <h3 class="box-title">{{title}}</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">名称</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" id="nameId" placeholder="名称" v-model="roleName">
            </div>
          </div>
          <div class="form-group">
            <label for="noteId" class="col-sm-2 control-label">描述</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="note" id="noteId" placeholder="描述" v-model="note">
            </div>
          </div>
          <div class="form-group">
				<label class="col-sm-2 control-label">授权</label>

                <div class="col-sm-10">
                    <el-tree
                            :props="props"
                            :data="treeData"
                            ref="roleTree"
                            empty-text="暂无数据"
                            node-key="id"
                            :default-expanded-keys="[8]"
                            :default-checked-keys="checkedIds"
                            show-checkbox
                            @check-change="handleCheckChange">
                    </el-tree>
                </div>

		  </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel" @click="doCancel">取消</button>
          <button type="button" class="btn btn-info pull-right btn-save" @click="doSaveOrUpdate">{{btnVal}}</button>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
    <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript">
        var roleEditApp= new Vue({
            el:"#roleEdit",
            data(){
                return {
                    props: {
                        label: 'label',
                        children: 'children'
                    },
                    treeData: [],
                    title:'添加角色',
                    roleName:'',
                    note:'',
                    btnVal:'添加',
                    checkedIds:[]
                }
            },
            methods: {
                handleCheckChange(data, checked, indeterminate) {
                    console.log(data, checked, indeterminate);
                    console.log('获取选择的id', this.$refs.roleTree.getCheckedKeys())
                    console.log('获取选择的节点', this.$refs.roleTree.getCheckedNodes())
                    console.log('获取选择的父id', this.$refs.roleTree.getHalfCheckedKeys())
                    console.log('获取选择的父节点', this.$refs.roleTree.getHalfCheckedNodes())
                },
                /*将服务器响应的数组数据传递给该方法处理即可*/
                generateTreeData(data) {
                    let result = {}
                    let temp = {}
                    data.forEach(item => {
                        temp[item.id] = {
                            id: item.id,
                            parentId: item.parentId,
                            label: item.name,
                            children: []
                        }
                    })
                    for (let key in temp) {
                        let parentId = temp[key].parentId
                        if (parentId) {
                            if (!temp[parentId].children) {
                                temp[parentId].children = []
                            }
                            temp[parentId].children.push(temp[key])
                        } else {
                            result[temp[key].id] = temp[key]
                        }
                    }
                    console.log(result)
                    this.treeData = Object.values(result)
                },
                loadMenuNodes:function () {
                    axios({
                        method:'get',
                        url: '/sys-menus/findMenuNodes'
                    }).then(res=>{
                        var result=res.data;
                        if(result.state==2000){
                            //将所有菜单数据传递给上方的方法,加载出来
                            this.generateTreeData(result.data);
                        }else{
                            alert(result.message);
                        }
                    }).catch(e=>console.error(e.message));
                },
                doCancel:function () {
                    let roleId=$('#mainContentId').data('roleId');
                    if (roleId){
                        $('#mainContentId').data('roleId','');
                    }
                    //跳转到角色列表视图
                    $('#mainContentId').load('/sys/roleList');
                },
                doSaveOrUpdate:function () {
                    //获取表单数据
                    let fordata=this.getData();
                    let roleId=$('#mainContentId').data('roleId');
                    let url="/sys-roles/saveRole";
                    if(roleId){
                        url="/sys-roles/modifyRole";
                        fordata.append("id",roleId);
                    }
                    //发起axios请求提交数据并保存
                    axios.post(url,fordata).then(res=>{
                        var result=res.data;
                        if(result.state=2000){
                            alert("操作成功!");
                            this.doCancel();
                        }else{
                            alert(result.message)
                        }
                    }).catch(e=>console.error((e.message)))

                },
                getData:function(){
                   var roleName=this.roleName;
                   var note=this.note;
                   //进行非空判断
                    if(!roleName){
                        alert("角色名称不能为空!");
                        return ;
                    }
                    if(!note){
                        alert("角色描述不能为空!");
                        return ;
                    }
                   //选中的菜单 字符串类型
                   var menuIdsAry=this.$refs.roleTree.getCheckedKeys();
                    if(menuIdsAry.length==0){
                        alert("请选择权限!");
                    }
                    var menuIds=menuIdsAry.join(',');
                    //将数据转换为data对象
                    var formData=new FormData();
                    formData.append("name",roleName);
                    formData.append("note",note)
                    formData.append("menuIds",menuIds);
                   return formData;
                }
            },
            mounted:function () {
                //向后端发起请求,获取所有的菜单数据
                this.loadMenuNodes();
            }
            });

        $(function () {
            //获取roleId 的值判断该值是否存在  存在则为修改角色的页面
            let roleId=$('#mainContentId').data('roleId');
            console.log(roleId);
            if(roleId){
                roleEditApp.btnVal="修改";
                axios.get("/sys-roles/findRoleById?roleId="+roleId).then(function (result) {
                    let re=result.data;
                    if(re.state==2000){
                        roleEditApp.roleName= re.data.name;
                        roleEditApp.note= re.data.note;
                        roleEditApp.checkedIds=re.data.menuIds
                    }
                   // console.log(result);
                })

            }

        });




    
    </script>
    
    
    
    
    
    
    
    